'use client';

import { Layout, Menu, Button, Avatar, Spin } from 'antd';
import { HomeOutlined, ClockCircleOutlined, UserOutlined, RightOutlined } from '@ant-design/icons';
import { Breadcrumb } from 'antd';
import { css } from '@emotion/css';

const menuStyles = css`
  .ant-menu-item, .ant-menu-submenu-title {
    transition: all 0.3s ease;
    &:hover {
      background-color: #1890ff;
      color: #fff;
    }
  }
`;

const buttonStyles = css`
  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
`;

export const LoadingLayout = () => (
  <div style={{ 
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: '#001529',
    zIndex: 1000
  }}>
    <div style={{
      height: 64,
      background: '#001529',
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      zIndex: 1001,
      borderBottom: '1px solid #303030',
      display: 'flex',
      alignItems: 'center',
      padding: '0 24px'
    }}>
      <span style={{ color: '#fff', fontSize: '18px' }}>人力资源管理系统</span>
      <div style={{ marginLeft: 'auto', marginRight: '16px' }}>
        <Button type="link" style={{ color: '#fff', height: 64 }} className={buttonStyles}>
          <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
          <span style={{ marginLeft: '8px' }}>加载中...</span>
        </Button>
      </div>
    </div>
    <div style={{
      width: 200,
      background: '#001529',
      position: 'fixed',
      top: 64,
      left: 0,
      bottom: 0,
      zIndex: 1000
    }}>
      <Menu
        theme="dark"
        mode="inline"
        className={menuStyles}
        style={{
          border: 'none',
          margin: 0,
          padding: 0
        }}
      >
        <Menu.Item key="home" icon={<HomeOutlined />} disabled>系统首页</Menu.Item>
        <Menu.Item key="clockIn" icon={<ClockCircleOutlined />} disabled>考勤打卡</Menu.Item>
      </Menu>
    </div>
    <div style={{ 
      marginLeft: 200,
      marginTop: 64,
      padding: '24px 16px',
      minHeight: 'calc(100vh - 64px)',
      background: '#f0f2f5',
      position: 'relative'
    }}>
      <div className="content-wrapper" style={{ margin: 0 }}>
        <div style={{ 
          background: '#fff',
          padding: '18px 24px',
          marginBottom: '24px',
          boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
        }}>
          <Breadcrumb separator={<RightOutlined />}>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            <Breadcrumb.Item>加载中...</Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <div style={{ 
          background: 'linear-gradient(to right, #e6f7ff, #bae7ff)',
          padding: '24px',
          minHeight: '200px',
          boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <Spin size="large" />
        </div>
      </div>
    </div>
  </div>
); 